<template>
    <div class="tabbar" :class="{ 'fold': !settingStore.isExpand }">
        <div class="tabbar-left">
            <el-icon @click="settingStore.handleExpand" style="margin-right: 10px;">
                <Expand v-if="settingStore.isExpand" />
                <Fold v-else />
            </el-icon>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, index) in route.matched" :key="index" :to="{ path: item.path }">
                    <el-icon>
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    {{ item.meta.title }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tabbar-right">
            <el-button type="primary" size="small" @click="settingStore.handleRefresh" icon="Refresh"
                circle></el-button>
            <el-button type="primary" size="small" @click="handleFullScreen" icon="FullScreen" circle></el-button>
            <el-popover placement="bottom" title="主题设置" width="180px" trigger="click">
                <el-form label-width="80px" :inline="false" size="default">
                    <el-form-item label="主题色">
                        <el-color-picker v-model="settingStore.themeColor" @change="handleThemeColor" size="default"
                            :predefine="predefineColors" :teleported="false"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="暗夜模式">
                        <el-switch v-model="settingStore.isDark" active-action-icon="Moon"
                            inactive-action-icon="Sunny" />
                    </el-form-item>

                </el-form>

                <template #reference>
                    <el-button type="primary" size="small" @click="" icon="Setting" circle></el-button>
                </template>
            </el-popover>
            <img :src="userStore.userInfo.avatar" style="width: 30px;height: 30px;border-radius: 50%;" alt="用户头像">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ userStore.userInfo.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useSettingStore } from '@/store/modules/setting';
import { useUserStore } from '@/store/modules/user';
import { useRoute, useRouter } from 'vue-router';
import { ref, watch } from 'vue';
import { ElNotification } from 'element-plus';
const settingStore = useSettingStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
let fullScreen = ref(false);
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])
const handleFullScreen = () => {
    fullScreen.value = !fullScreen.value;
    if (fullScreen.value) {
        document.documentElement.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
}
const handleLogout = async () => {
    try {
        await userStore.logout();
        ElNotification({
            message: '退出成功',
            type: 'success'
        })
        router.push('/login');
    } catch (error) {
        ElNotification({
            message: (error as Error).message,
            type: 'error'
        })
    }
}
const handleThemeColor = () => {
    // document.documentElement 是全局变量时
    const el = document.documentElement
    // const el = document.getElementById('xxx')

    // 获取 css 变量
    getComputedStyle(el).getPropertyValue(`--el-color-primary`)

    // 设置 css 变量
    el.style.setProperty('--el-color-primary', settingStore.themeColor)

}
watch(() => settingStore.isDark, (newVal: boolean) => {
    if (newVal) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
})
</script>
<style lang="less" scoped>
@import '../../../styles/tabbar/index.less';
</style>